import { Loading } from '@alifd/next';
import React, { useEffect } from 'react';

/**
 * 当原始组件不支持loading时,可使用这个HOC为组件添加Loading显示功能
 * @param {React.Component} WrappedComponent
 * @returns {React.Component}
 */
export function withLoading(WrappedComponent) {
  return function (props) {
    const { loading, ...otherProps } = props;
    const [loadingState, setLoadingState] = React.useState(loading);

    useEffect(() => setLoadingState(loading), [loading]);

    if (loadingState) {
      return <Loading />;
    }
    return <WrappedComponent {...otherProps} />;
  };
}
